<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>后台</title>
    <link href="${pageContext.request.contextPath}/admin/css/styles.css" rel="stylesheet" />
    <script src="${pageContext.request.contextPath}/admin/js/all.js"></script>
    <script src="${pageContext.request.contextPath}/JavaScript/vue.js"></script>
</head>
<body class="sb-nav-fixed">
<%@ include file="include/head.jsp" %>
<div id="layoutSidenav">
    <%@ include file="include/nav.jsp" %>
    <div id="layoutSidenav_content">
        <div class="container-fluid px-4">

            <form role="form" action="${pageContext.request.contextPath}/updataAdminServlet?id=${user.getUserID()}" method="post" class="app">
                <div class="col-md-12 column">
                    <div class="row clearfix">
                        <div class="col-md-6 column">
                            学号<span class="name"></span><input type="text" class="form-control" name="UserID" value="${user.getUserID() }"/>
                        </div>
                        <div class="col-md-6 column">
                            姓名<input type="text" class="form-control" name="Password" value="${user.getName() }" name="name"/>
                        </div>
                    </div><br>

                    <div class="row clearfix">
                        <div class="col-md-6 column">
                            职位<input type="text" class="form-control" name="role" value="${user.getRole() }"/>
                        </div>
                        <div class="col-md-6 column">
                            管理员等级
                            <select class="form-control" name="AdminID" v-model="selectedAdminLevel">
                                <option v-for="level in adminLevels" :value="level.value" v-if="level.value < sessionAdminLevel">
                                    {{ level.name }}
                                </option>
                            </select>
                        </div>
                    </div><br>
                </div>
                <button type="submit" class="btn btn-success" @click="checkAdminLevel">确定</button>
                <button type="reset" class="btn btn-primary">重置</button>
            </form>

        </div>
        <%@ include file="include/foot.jsp" %>
    </div>
</div>
<script src="${pageContext.request.contextPath}/admin/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/admin/js/scripts.js"></script>

<script>
	var app = new Vue({
		el: ".app",
		data: {
			sessionAdminLevel: ${sessionScope.LogUser.getAdminID()},
			userAdminLevel: ${user.getAdminID()},
			selectedAdminLevel: ${user.getAdminID()},
			adminLevels: [
				{ value: 0, name: '学生' },
				{ value: 1, name: '班级副级管理员' },
				{ value: 2, name: '班级正级管理员' },
				{ value: 3, name: '部落副级管理员' },
				{ value: 4, name: '部落正级管理员' },
				{ value: 5, name: '院级副级管理员' },
				{ value: 6, name: '院级正级管理员' },
				{ value: 7, name: '校级副级管理员' },
				{ value: 8, name: '校级正级管理员' },
				{ value: 9, name: '服务器管理员' }
			]
		},
		methods: {
			checkAdminLevel: function(event) {
				if (this.userAdminLevel >= this.sessionAdminLevel) {
					alert('无法修改：管理员等级必须低于登录者的管理员等级');
					event.preventDefault();
				}
			}
		}
	});
</script>
</body>
</html>
